@use '../core' as *;

:global(#heroGrid.ag-theme-quartz-dark) {
    position: relative;
    overflow: hidden;

    svg[class*='logo-mark'] {
        position: absolute;
        display: block;
        width: 64px * 2;
        height: 48px * 2;
        top: 50%;
        left: 50%;
        transform: translate(-60px, -48px);
    }

    &:global(.loaded) svg[class*='logo-mark'] {
        display: none;
    }
}

:global(#heroGrid.ag-theme-quartz-dark .ag-root-wrapper) {
    align-self: end;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border: none;

    @media screen and (max-width: $breakpoint-hero-small) {
        --ag-range-selection-border-color: transparent;
    }
}

:global([data-dark-mode='false'] #heroGrid.ag-theme-quartz-dark .ag-root-wrapper) {
    --ag-background-color: #001223;
    --ag-foreground-color: #94b2d0;

    --ag-borders: 1px solid;
    --ag-border-color: rgba(255, 255, 255, 0.1);

    --ag-row-height: 48px;
    --ag-odd-row-background-color: #001223;

    --ag-header-height: 30px;
    --ag-header-background-color: #001223;
    --ag-header-foreground-color: rgba(255, 255, 255, 0.7);

    --input-background-color: #001223;
    --input-focus-box-shadow-color: rgba(255, 255, 255, 0.25);

    #{$selector-darkmode} & {
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}
